<script setup>
import { fetchCityData } from "../api/weatherAPI";
import { ref } from "vue";

//引入状态管理
import { useCityStore } from "../stores/cityStore";

const cityName = ref('')  //数据【引用】，用于页面与api中的联系
//获取store实例
const cityStore = useCityStore()

function request(){
  // 调用网络请求的函数
  getData(cityName.value)
}
// getData(cityName.value)
// //网络请求函数
async function getData(cityName) {
    //请求城市搜索
    const res =await fetchCityData(cityName)
    // console.log(res)
    // console.log("------更新状态前------")
    // console.log(cityStore.location)//
    //
    cityStore.updateLocation(res.location[0])  //执行更新动作
    // console.log("------更新状态后------")
    //  console.log(cityStore.location)
}
</script>


<template>
  <div class="city-search">
    <input type="search" name="" id=""  placeholder="请输入城市名称"  v-model="cityName"  @change="request()">
  </div>
</template>


<style scope>


</style>